<template>
  <div v-loading="loading" class="addDialog">
    <el-dialog :visible.sync="visible" title="修改" width="30%" :close-on-click-modal="false" :show-close="false">
      <el-form ref="ruleForm" :model="ruleForm" :rules="rules" label-width="100px" class="demo-ruleForm">
        <el-form-item label="模板渠道" prop="tempChannel">
          <el-select v-model="ruleForm.tempChannel" placeholder="请选择 模板渠道" style="width: 100%;"><el-option label="Ali_SMS" value="Ali_SMS" /></el-select>
        </el-form-item>
        <el-form-item label="模板内容" prop="tempContent"><el-input v-model="ruleForm.tempContent" placeholder="请输入 模板内容" /></el-form-item>
        <el-form-item label="模板编码" prop="tempCodeNo"><el-input v-model="ruleForm.tempCodeNo" placeholder="请输入 模板编码" /></el-form-item>
        <el-form-item label="AccessKey" prop="AccessKey"><el-input v-model="ruleForm.AccessKey" /></el-form-item>
        <el-form-item label="Secret" prop="Secret"><el-input v-model="ruleForm.Secret" placeholder="请输入 Secret" /></el-form-item>
        <el-form-item label="签名" prop="signature"><el-input v-model="ruleForm.signature" placeholder="请输入 签名" /></el-form-item>
        <el-form-item label="模板Code" prop="tempCode"><el-input v-model="ruleForm.tempCode" placeholder="请输入 模板Code" /></el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="visible = false">取 消</el-button>
        <el-button type="primary" @click="submitForm('ruleForm')">修 改</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import { updateSmsTemp } from '@/api/smsTemplate'
export default {
  props: ['detailMsg'],
  data() {
    return {
      loading: false,
      visible: false,
      ruleForm: {
        tempChannel: '',
        tempContent: '',
        tempCodeNo: '',
        AccessKey: '',
        Secret: '',
        signature: '',
        tempCode: '',
        id: ''
      },
      rules: {
        tempChannel: [{ required: true, message: '请选择模板渠道', trigger: 'change' }],
        tempContent: [{ required: true, message: '请输入模板内容', trigger: 'blur' }],
        tempCodeNo: [{ required: true, message: '请输入模板编码', trigger: 'blur' }],
        AccessKey: [{ required: true, message: '请输入AccessKey', trigger: 'blur' }],
        Secret: [{ required: true, message: '请输入Secret', trigger: 'blur' }],
        signature: [{ required: true, message: '请输入签名', trigger: 'blur' }],
        tempCode: [{ required: true, message: '请输入模板Code', trigger: 'blur' }]
      }
    }
  },
  methods: {
    submitForm(formName) {
      this.$refs[formName].validate(valid => {
        const cloudSmsTempForm = {
          tenantId: this.ruleForm.tempChannel,
          templateContent: this.ruleForm.tempContent,
          templateCode: this.ruleForm.tempCodeNo,
          accessKey: this.ruleForm.AccessKey,
          accessSecret: this.ruleForm.Secret,
          templateSign: this.ruleForm.signature,
          sourceTemplateCode: this.ruleForm.tempCode,
		  id: this.ruleForm.id
        }
        if (valid) {
          this.loading = true
          updateSmsTemp(cloudSmsTempForm)
            .then(res => {
              if (res.code === 0) {
                this.loading = false
                this.visible = false
                this.ruleForm = ''
                this.$message({
                  message: '修改成功！',
                  type: 'success'
                })
                this.$emit('fevent')
              }
            })
            .catch(() => {
              this.loading = false
            })
        } else {
          return false
        }
      })
    },
    changeEdit() {
      const that = this
      this.visible = true
      setTimeout(function() {
        const { tempChannel, tempContent, tempCodeNo, AccessKeyMin, SecretMin, signature, tempCode, id } = that.detailMsg
        that.ruleForm = {
          tempChannel,
          tempContent,
          tempCodeNo,
          AccessKey:AccessKeyMin,
          Secret:SecretMin,
          signature,
          tempCode,
          id
        }
      }, 200)
    }
  }
}
</script>

<style lang="scss" scoped>
.addDialog {
}
</style>
